<?php

require_once('config.php');

$curtentUrl = strstr($_SERVER['PHP_SELF'], 'home');

$num = mysqli_fetch_array($con->query("select count(*) from picture where (is_open=1)"));

$num = ceil($num[0]/8);

if ($num > 3) {

    $n = 4;
} else {
    $n = $num;
}
$num1 = mysqli_fetch_array($con->query("select count(*) from picture where (is_open=1 and type=1)"));
$num1 = ceil($num1[0] / 8);
if ($num1 > 3) {
    $n1 = 4;
} else {
    $n1 = $num1;
}
$num2 = mysqli_fetch_array($con->query("select count(*) from picture where (is_open=1 and type=2)"));
$num2 = ceil($num2[0] / 8);
if ($num2 > 3) {
    $n2 = 4;
} else {
    $n2 = $num2;
}
$num3 = mysqli_fetch_array($con->query("select count(*) from picture where (is_open=1 and type=3)"));
$num3 = ceil($num3[0] / 8);
if ($num3 > 3) {
    $n3 = 4;
} else {
    $n3 = $num3;
}
$sql = "select url,updateTime,description,title,entitle,endesc from picture where (is_open=1) order by updateTime desc limit 8";
$res = $con->query($sql);
$data = selarr($res);
// var_dump($data);exit;
function selarr($res = array())
{
    $a = array();
    while ($row = mysqli_fetch_assoc($res)) {
        $a[] = $row;
    }
    return $a;
}

?>
<div class="con container" style="position: relative;">
    <div class="titleone">
        <a class="on" href="javascript:void(0)">全部</a>
        <a href="javascript:void(0)">案例</a>
        <a href="javascript:void(0)">產品</a>
        <a href="javascript:void(0)" class="last">公告</a>
    </div>

    <div class="listone list1">
        <div class="m-slide">
            <ul class="img" style="position: relative; width: 65%;">
                <?php foreach ($data as $v) { ?>
                    <li style="position:absolute; width: 100%; left: 0px; top: 0px; display: list-item;"><a href="javascript:void(0);" target="_blank"><img class="clzy" src="hk-admin/upload/<?php echo $v['url'] ?>"></a>
                    <p><?php if ($curtentUrl == "home.php") {
                                echo $v['description'];
                            } else {
                                echo $v['endesc'];
                            } ?></p></li>
                <?php }; ?>
            </ul>
            <ul class="tab">
                <?php foreach ($data as $v) { ?>
                    <li class=""><a href="javascript:void(0);" title="<?php echo $v['title'] ?>"><span
                                    class="title"><?php if ($curtentUrl == "home.php") {
                                    echo $v['title'];
                                } else {
                                    echo $v['entitle'];
                                } ?></span></a><b
                                style="width: 34%;margin-left: 80%;font-size: 13px;margin-top:16px;color: #ccc; "><?php echo @date('Y-m-d', $v['updateTime']); ?></b>
                    </li>
                <?php }; ?>
            </ul>
            <div class="page1">
                <a href="javascript:void(0);">上頁</a>
                <a href="javascript:void(0);">1</a>
                <?php for ($i = 2; $i <= $n; $i++) { ?>
                    <a href="javascript:void(0);"><?php echo $i; ?></a>
                <?php } ?>
                <span>...</span>
                <a href="javascript:void(0);">末頁</a>
                <a href="javascript:void(0);">下頁</a>
            </div>
            <script>
                var curtent = 1;
                $('.page1 a').click(function () {
                    var pagenum = $(this).text();
                    var type = 0;
                    if (pagenum == "上頁") {
                        if (curtent == 1) {
                            alert("當前為第一頁！");
                        } else {
                            curtent--;
                            ajaxcommit('.list1', curtent, type);
                        }
                    } else if (pagenum == "末頁") {
                        curtent =<?php echo $num;?>;
                        ajaxcommit('.list1', curtent, type);
                    } else if (pagenum == "下頁") {
                        if (curtent ==<?php echo $num;?>) {
                            alert("當前為最後一頁！");
                        } else {
                            curtent++;
                            ajaxcommit('.list1', curtent, type);
                        }
                    } else {
                        curtent = pagenum;
                        ajaxcommit('.list1', curtent, type);
                    }
                });
                function ajaxcommit(list=".list1", curtent=1, type=0) {
                    $.ajax({
                        url: 'page.php',
                        type: 'post',
                        dataType: 'json',
                        data: {'pagenum': curtent, 'type': type},
                        success: function (res) {
                            $(list + ' .m-slide ul').empty();
                            res.forEach(function (val, index) {
                                $(list + ' .m-slide .img').prepend('<li style="position:absolute; width: 100%; left: 0px; top: 0px; display: list-item;"> <a href="javascript:void(0);" target="_blank"><img class="clzy" src="hk-admin/upload/' + val['url'] + '"></a><p><?php if ($curtentUrl == "home.php") {
                                        echo "'+val['description']+'";
                                    } else {
                                        echo "'+val['endesc']+'";
                                    }?></p></li>');
                                $(list + ' .m-slide .tab').prepend('<li class=""><a href="javascript:void(0);" title="' + val["title"] + '"><span class="title"><?php if ($curtentUrl == "home.php") {
                                        echo "'+val['title']+'";
                                    } else {
                                        echo "'+val['entitle']+'";
                                    }?></span></a><b style="width: 34%;margin-left: 80%;font-size: 13px;margin-top:16px;color: #ccc; ">' + val["updateTime"] + '</b></li>');
                            });

                            $(list + ' .m-slide .img li').css('display', 'none');
                            $(list + ' .m-slide .img li:first-child').css('display', 'block');
                            $(list + ' .m-slide .tab li:first-child').addClass('on');
                            $(list + ' .m-slide .tab li').hover(function () {
                                $(list + ' .m-slide .tab .on').removeClass('on');
                                $(this).addClass('on');
                                $(list + ' .m-slide .img li').css('display', 'none');
                                $(list + ' .m-slide .img li').eq($(this).index()).css('display', 'block');
                            });

                        }
                    });
                }
            </script>
        </div>
    </div>
    <div class="listone list2 " style="display: none;">
        <div class="m-slide">
            <ul class="img" style="position: relative; width: 65%;">
            </ul>
            <ul class="tab">
            </ul>
            <div class="page2">
                <a href="javascript:void(0);">上頁</a>
                <a href="javascript:void(0);">1</a>
                <?php for ($i = 2; $i <= $n1; $i++) { ?>
                    <a href="javascript:void(0);"><?php echo $i; ?></a>
                <?php } ?>
                <span>...</span>
                <a href="javascript:void(0);">末頁</a>
                <a href="javascript:void(0);">下頁</a>
            </div>
            <script>
                var curtent = 1;
                $('.page2 a').click(function () {
                    var pagenum = $(this).text();
                    var type = 1;
                    if (pagenum == "上頁") {
                        if (curtent == 1) {
                            alert("當前為第一頁！");
                        } else {
                            curtent--;
                            ajaxcommit('.list2', curtent, type);
                        }
                    } else if (pagenum == "末頁") {
                        curtent =<?php echo $num1;?>;
                        ajaxcommit('.list2', curtent, type);
                    } else if (pagenum == "下頁") {
                        if (curtent ==<?php echo $num1;?>) {
                            alert("當前為最後一頁！");
                        } else {
                            curtent++;
                            ajaxcommit('.list2', curtent, type);
                        }

                    } else {
                        curtent = pagenum;
                        ajaxcommit('.list2', curtent, type);
                    }
                });
            </script>
        </div>
    </div>
    <div class="listone list3" style="display: none;">

        <div class="m-slide">

            <ul class="img" style="position: relative; width: 65%;">

            </ul>
            <ul class="tab">

            </ul>
            <div class="page3">
                <a href="javascript:void(0);">上頁</a>
                <a href="javascript:void(0);">1</a>
                <?php for ($i = 2; $i <= $n2; $i++) { ?>
                    <a href="javascript:void(0);"><?php echo $i; ?></a>
                <?php } ?>
                <span>...</span>
                <a href="javascript:void(0);">末頁</a>
                <a href="javascript:void(0);">下頁</a>
            </div>
            <script>
                var curtent = 1;
                $('.page3 a').click(function () {
                    var pagenum = $(this).text();
                    var type = 2;
                    if (pagenum == "上頁") {
                        if (curtent == 1) {
                            alert("當前為第一頁！");
                        } else {
                            curtent--;
                            ajaxcommit('.list3', curtent, type);
                        }
                    } else if (pagenum == "末頁") {
                        curtent =<?php echo $num2;?>;
                        ajaxcommit('.list3', curtent, type);
                    } else if (pagenum == "下頁") {
                        if (curtent ==<?php echo $num2;?>) {
                            alert("當前為最後一頁！");
                        } else {
                            curtent++;
                            ajaxcommit('.list3', curtent, type);
                        }

                    } else {
                        curtent = pagenum;
                        ajaxcommit('.list3', curtent, type);
                    }
                });
            </script>
        </div>
    </div>
    <div class="listone list4" style="display: none;">
        <div class="m-slide">
            <ul class="img" style="position: relative; width: 65%;">

            </ul>
            <ul class="tab">

            </ul>
            <div class="page4">
                <a href="javascript:void(0);">上頁</a>
                <a href="javascript:void(0);">1</a>
                <?php for ($i = 2; $i <= $n3; $i++) { ?>
                    <a href="javascript:void(0);"><?php echo $i; ?></a>
                <?php } ?>
                <span>...</span>
                <a href="javascript:void(0);">末頁</a>
                <a href="javascript:void(0);">下頁</a>
            </div>
            <script>
                var curtent = 1;
                $('.page4 a').click(function () {
                    var pagenum = $(this).text();
                    var type = 3;
                    if (pagenum == "上頁") {
                        if (curtent == 1) {
                            alert("當前為第一頁！");
                        } else {
                            curtent--;
                            ajaxcommit('.list4', curtent, type);
                        }
                    } else if (pagenum == "末頁") {
                        curtent =<?php echo $num3;?>;
                        ajaxcommit('.list4', curtent, type);
                    } else if (pagenum == "下頁") {
                        if (curtent ==<?php echo $num3;?>) {
                            alert("當前為最後一頁！");
                        } else {
                            curtent++;
                            ajaxcommit('.list4', curtent, type);
                        }

                    } else {
                        curtent = pagenum;
                        ajaxcommit('.list4', curtent, type);
                    }
                });
            </script>
        </div>
        <script type="text/javascript">
            jQuery(".m-slide").slide({titCell: ".tab li", mainCell: ".img", effect: "fold", autoPlay: false});
            $(function () {
                var h = $('.img li a img').height() - 30;
                $('.tab').css('height', h);
                $('.page1').css('top', h - 20);
                $('.page2').css('top', h - 20);
                $('.page3').css('top', h - 20);
                $('.page4').css('top', h - 20);
            });
            $('.titleone a').click(function(){
                var index = $(this).index();
                $('.titleone .on').removeClass('on');
                $(this).addClass('on');
                $('.listone').css('display', 'none');
                $('.list' + (index + 1)).css('display', 'block');
                ajaxcommit('.list' + (index + 1), 1, index);
            });
        </script>
    </div>
</div>